<template>
  <div>
    <el-calendar
      v-model="calendar.productDate"
      :style="!showCalendar ? 'pointer-events: none; color: #eee' : ''"
    >
      <div
        slot="dateCell"
        slot-scope="{ data }"
        @click="showModal = true; calendar.productDate = data.day"
        class="temp"
      >

        <p>
          {{ data.day.split('-').slice(2).join('-') }}<br>
          <span v-for="item in tableData" v-if="item.orderDate === data.day" style="color:blue">
          可预约人数: {{ item.number }}<br>
          已预约人数: {{ item.reservations }}
          </span>
        </p>


      </div>
    </el-calendar>


    <el-dialog
      :visible.sync="showModal"
      :title="'日历预约'"
      :custom-class="'blue-dialog'"
    >
      <el-form :model="form">
        <el-form-item label="预约日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.orderDate"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            :style="{ width: '300px' }"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="可预约人数" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入可预约人数"
            v-model="form.number"
            clearable
            :style="{ width: '300px' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import axios from "axios";

export default {

  beforeCreate() {
    console.log('beforeCreate: 页面加载前执行方法')
    axios.get('api/ordersetting/findAll').then(res => {
      console.log(res)
      this.tableData1=res.data.data;
      this.tableData = res.data.data
      console.log(this.tableData.length)
    })
  },

  data() {
    return {

      tableData:[],
      tableData1:[],
      showCalendar: true,
      showModal: false,
      formLabelWidth:'200px',
      calendar: {
        productDate: null,
      },
      pickerOptions: {
        disabledDate(time) {
          const now = new Date(); // 创建当前时间的日期对象
          //now.setHours(0, 0, 0, 0);  设置时间为当天的零点时间
          return time.getTime() < now.getTime();//今天之前的日期无法选择
        },
        shortcuts: [
          {
            text: '明天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit('pick', date);
            },
          },
          {
            text: '后天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 2);
              picker.$emit('pick', date);
            },
          },
          {
            text: '一周后',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            },
          },
        ],
      },

      form: {
        orderDate: '',
        number: '',
        reservations:''
      },
    };
  },
  methods: {
    clearForm() {
      for (const key in this.form) {
        this.form[key] = '';
      }
      this.showModal = false;
    },
    submitForm() {

      var currentDate = this.form.orderDate;

// 将日期格式化为年月日
      var year = currentDate.getFullYear();
      var month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
      var day = currentDate.getDate().toString().padStart(2, '0');

// 格式化后的日期
      var formattedDate = year + '-' + month + '-' + day;

      this.form.orderDate=formattedDate;

      console.log('预约日期：' + this.form.orderDate);

      //console.log('预约日期'+this.form.orderDate);
      console.log('可预约人数'+this.form.number);

      // 发送POST请求，提交表单数据
      axios.post('/api/ordersetting/tjrlyy', this.form)
        .then(response => {
          // 处理提交成功的逻辑
          this.dialogFormVisible = false; // 关闭弹窗
          this.$message.success('提交成功');
          console.log("666")

          // 清空数据源
          this.tableData = [];
          this.tableData1 = [];
          this.cxsytc();
        })
        .catch(error => {
          // 处理提交失败的逻辑
          this.$message.error('提交失败');
        });
      this.showModal = false;

      this.clearForm();

    },
    cxsytc() {

      axios.get('api/ordersetting/findAll').then(res => {
        console.log(res)
        this.tableData = res.data.data
        this.tableData1 = res.data.data

        console.log(this.tableData.length)
      })
    }
  },
};
</script>

<style>
.temp {
  cursor: pointer;
}

.blue-dialog .el-dialog__header {
  background-color: #199dd7;
}
.blue-dialog .el-dialog__title {
  color: white;
}

</style>
<style lang="scss">

// 日历单元格鼠标经过背景色
.el-calendar-table .el-calendar-day:hover {
  background-color: #faf6e2;
}
.el-calendar-table td.is-selected {
  background-color: #27a8e2;
  color: #ffffff;  // 设置为白色

}

</style>

